<template>
  <div class="phone-main">
    <div class="preview">
      <div class="head">
        <div class="top">
          <span class="time">9：41</span>
          <div class="icons">
            <img src="@/assets/channelConfig/marketingApplet/micon.png" alt="" class="micon" />
            <img src="@/assets/channelConfig/marketingApplet/dicon.png" alt="" class="dicon" />
            <img src="@/assets/channelConfig/marketingApplet/picon.png" alt="" class="picon" />
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-title">营销小程序</div>
        <el-scrollbar height="620px">
          <div class="banner-list">
            <el-carousel height="232px">
              <el-carousel-item v-for="(item,index) in props.bannerList" :key="index">
                <img class="banner-img" :src="item.url" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="poster-position">
            <img v-for="(item,index) in props.posterList" :key="index" :src="item.url" alt="">
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'

const props = defineProps({
  bannerList: {
    type: Array,
    default: () => {
      return []
    }
  },
  posterList: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const bannerList = ref<any>([])
const posterList = ref<any>([])

</script>
<style lang="scss" scoped>
.phone-main {
  .preview {
    width: 414px;
    box-shadow: 0 0 14px 0 rgb(0 0 0 / 10%);
    // border: 1px solid red;
    margin: 0 auto;
    height: 660px;
  }
  .head {
    background: #ffffff;
    .top {
        padding: 19px 10px 9px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
            font-size: 14px;
            color: #000000;
            line-height: 16px;
        }
        .icons {
            display: flex;
        }
        .micon {
            width: 15px;
            height: 10px;
            margin-right: 4px;
        }
        .dicon {
            width: 15px;
            height: 11px;
            margin-right: 4px;
        }
        .picon {
            width: 22px;
            height: 11px;
        }
    }
  }
  .content {
    .content-title {
      padding: 9px 0;
      color: #333333;
      line-height: 25px;
      font-size: 16px;
      text-align: center;
    }
    .banner-list {
      background: #e8e8e8;
      :deep(.el-carousel__button) {
        width: 6px;
        height: 6px;
        background: #FF6B00;
        border-radius: 50%;
      }
      .banner-img {
        width: 100%;
        height: 100%;
      }
    }
    .poster-position {
      margin-top: 10px;
      background: #e8e8e8;
      img {
        width: 100%;
      }
    }
  }
}
</style>